<template>
  <div>
    <h1>x的坐标{{x}}</h1>
    <h1>y的坐标{{y}}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent,onMounted,onUnmounted,ref } from 'vue'

export default defineComponent({
  setup () {
    const x = ref(0);
    const y = ref(0);

    const updatePosition = (e:MouseEvent) =>{
      x.value = e.pageX;
      y.value = e.pageY;
    };
    onMounted(()=>{
      document.addEventListener('click',updatePosition);

    });
    onUnmounted(()=>{
      document.removeEventListener('click',updatePosition);
    });

    return {
      x,
      y,
    };
  },
});
</script>

<style scoped>

</style>
